<template>
  <div class="order" ref="homePage">
    <van-nav-bar @click-left="clickleft" style="background: #ececec;" title="提交订单" left-text="" left-arrow>
      <div slot="right" class="search">
      </div>
    </van-nav-bar>
    <div class="order-order">
      <div class="order-box1">
        <div class="order-title-tab">
          <div class="order-left">
            <p class="title">太湖旅游年卡 个人卡 </p>
            <p class="tags">
              <van-tag color="#46d0ca" type="danger" plain>标签</van-tag>
              <van-tag color="#46d0ca" type="danger" plain>标签</van-tag>
              <van-tag color="#46d0ca" type="danger" plain>标签</van-tag>
              <van-tag color="#46d0ca" type="danger" plain>标签</van-tag>
              <van-tag color="#46d0ca" type="danger" plain>标签</van-tag>

            </p>
          </div>
          <div class="order-select">
            <van-button type="default" style="border-radius: 5px;height: 1.5625rem;line-height: 1.5625rem;" color="#46d0ca" size="small">请选择时间
            </van-button>
            <van-stepper style="margin-top: 0.3125rem;" min="1" max="10" />
          </div>
        </div>
      </div>
      <div class="order-ticket-item">
        <div class="order-ticket-item-top">
          <p>环城巴士一日通（好行卡）</p>
        </div>
        <div class="order-ticket-item-bottom" @click="selectLinkMan()">
          <van-tag color="#46d0ca" plain style="border-radius: 0.625rem;"><span>选择取票人</span></van-tag>
        </div>
        <div class="order-ticket-item-center">
          <div class="linkman iconfont">
            <van-icon color="#46d0ca" size="14px" class="color" name="user-o" />
            <span>李xx</span>
            <van-icon color="#46d0ca" size="14px" class="color" name="phone-o" />
            <span>186xxxxxxxx</span>
            <van-icon color="#46d0ca" size="14px" class="color" name="coupon-o" />
            <span>430426xxxxxxxxxxxx</span>
          </div>
        </div>
      </div>
    </div>
    <div class="order-coupon">
      <p class="left">
        <van-icon size="18px" color="#46d0ca" style="margin-right: 0.625rem;" name="bill-o" />
        <span style="color: #555;">选择优惠券:</span>
      </p>
      <van-button style="height: 1.5rem;line-height: 1.5rem;border-radius: 0.5rem;width: 5.5rem;" color="#46d0ca" type="primary"
        size="small">请选择</van-button>
    </div>
    <div class="post-demo">
      <textarea cols="30" rows="3" placeholder="订单备注："></textarea>
    </div>
    <div class="post-waring">
      本产品为特价产品，一经预定，不退不改，请预定前合理安排自己的行程，如需开发票请致电客服。
    </div>
    <div class="bottom">
      <div class="left">
        <span>￥888</span>
        <span style="color: rgb(153, 153, 153);font-size: 0.875rem;text-decoration:line-through;margin-left: 0.3125rem;">￥999</span>
      </div>
      <van-button type="default" color="#46d0ca" style="height: 100%;width: 10rem;font-size: 1.125rem;">提交</van-button>
    </div>
  </div>
</template>

<script>
  import search from '../search.vue'
  export default {
    components: {

      "v-search": search,
    },
    data() {
      return {
        clintHeigth: '', //获取页面高度
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
    methods:{
      clickleft() {
        this.$router.back(-1);
        console.log(1)
      },
      selectLinkMan() {
        this.$router.push({ //跳转订单详情
          path: "selectLinkMan",
          // query: {
          //   id: id,
          // }
        })
      }
    }
  }
</script>

<style lang="scss">
  .order {
    .van-nav-bar {
      .van-nav-bar__left {
        .van-icon {
          color: #46d0ca !important;
          font-size: 1.25rem;
        }
      }
    }
    .order-order {
      margin-bottom: 0.625rem;

      .order-box1 {
        background: #FFFFFF;
        margin-bottom: 0.25rem;

        .order-title-tab {
          padding: 0.3125rem 0.625rem;
          display: flex;
          font-size: 0.9375rem;
          border-bottom: 0.0625rem solid #eee;
          justify-content: space-between;

          .order-left {
            .title {
              line-height: 1rem;
              font-size: 0.875rem;
              padding: 0.625rem 0;
              margin-right: 0.625rem;
            }

            .tags {
              display: flex;
              flex-wrap: wrap;
              margin-bottom: 0.625rem;

              span {
                padding: 0 0.4375rem;
                margin-right: 0.3125rem;
                margin-right: 0.3125rem;
              }
            }
          }

          .order-select {
            display: flex;
            flex-direction: column;
            margin-right: 0.625rem;
          }
        }
      }

      .order-ticket-item {
        margin: 0 0.625rem;
        margin-bottom: 0.25rem;
        border-radius: 0.25rem;
        background: #FFFFFF;

        .order-ticket-item-top {
          padding: 0.625rem;
          line-height: 1rem;
          font-size: 0.875rem;
          border-bottom: 0.0625rem solid #eee;
        }

        .order-ticket-item-bottom {
          display: flex;
          align-items: center;
          padding-left: 0.625rem;
          height: 2.5rem;

        }

        .order-ticket-item-center {
          color: #6a6a6a;
          font-size: 0.875rem;
          line-height: 2rem;

          .linkman {
            padding: 0 0.625rem;
            display: flex;
            align-items: center;
            border-bottom: 0.0625rem solid #eee;
            height: 1.5625rem;
            font-size: 0.75rem;

            .color {
              margin-left: 0.25rem;
              margin-right: 0.125rem;
            }
          }
        }
      }
    }

    .order-coupon {
      border-radius: 0.25rem;
      height: 2.375rem;
      line-height: 2.375rem;
      padding: 0 0.625rem;
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.9375rem;

      .left {
        display: flex;
        align-items: center;
      }
    }

    .post-demo {
      display: flex;
      margin-top: 0.625rem;
      padding: 0.625rem;
      background-color: #FFFFFF;

      textarea {
        width: 100%;
        outline: 0;
        border-radius: 0;
        border: none;
        overflow: auto;
        resize: none;
        font: 100% tahoma, \5b8b\4f53, arial;
      }
    }

    .post-waring {
      background-color: #fdf4f3;
      color: #ec6133;
      margin-top: 0.625rem;
      padding: 0.625rem;
      font-size: 0.5rem;
    }
    .bottom{
      position: fixed;
      bottom: 0;
      color: #46d0ca;
      background: #FFFFFF;
      border-top: 0.0625rem solid #eee;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 3.5rem;
      display: flex;
      .left{
        margin-left: 0.9375rem;
        width: 12.5rem;
        font-size: 1.25rem;
        align-items: center;
        display: flex;
      }
    }
  }
</style>
